// 列表页-业务模块
console.log( '列表页-业务模块。。。' )

import './islogin.js'

/* import axios from "axios"

// 保存当前页面地址
localStorage.setItem('page_url',location.href)

// 获取token
let token = localStorage.getItem('token')

let username = document.querySelector('.username')

// 判断是否已登录
axios({
    method: 'get',
    url: 'http://localhost:8080/users/islogin',
    headers: {
        // 在请求头携带token到后端
        authorization: token
    }
})
.then((res)=>{
    let {data} = res
    if (data.code === 1) {
        // 已登录，显示已登录的账号
        username.innerText = data.data.user
    }
    else{
        // 未登录，跳转到登录页
        location.href = './login.html'
    }
})

// 点击展开下拉菜单
let menu2 = document.querySelector('.menu2')
username.onclick = function (e){
    e.stopPropagation()// 阻止事件传播
    menu2.style.display = 'block'
}
document.onclick = function (){
    menu2.style.display = 'none'
}

// 退出登录
let logout = document.querySelector('.logout')
logout.onclick = function (){
    // 删除本地的token
    localStorage.removeItem('token')
    alert('退出成功！')
    location.reload()
} */

import axios from "axios"

let count = 0 // 总条数
let pages = 0 // 总页数
let page = 1 // 页码
let size = 4 // 每一页条数

// 进入页面先获取第一页的数据并渲染出来
getpage(page,size)

// 获取分页数据
function getpage(page,size){
    // 发送获取分页数据的请求
    // axios.get(`http://localhost:8080/goods/getpage?page=${page}&size=${size}`)
    axios.get(`/api/goods/getpage?page=${page}&size=${size}`)
    .then((res)=>{
        let {data} = res
        count = data.count // 记录总条数
        pages = data.pages // 记录总页数
        console.log( count ) // 12
        console.log( pages ) // 3
        console.log( data.data ) // 查询到的分页数据[...]

        // 渲染表格
        renderTable(data.data)

        // 渲染分页
        renderPages(page,pages)
    })
}

// 渲染表格
function renderTable(arr){
    let tmp = `<tr>
                <th>商品名称</th>
                <th>商品描述</th>
                <th>商品价格</th>
                <th>商品类型</th>
                <th>商品图片</th>
                <th>操作</th>
            </tr>`
    arr.forEach((item)=>{
        tmp += `<tr>
                <td>${item.name}</td>
                <td>${item.desc}</td>
                <td>${item.price}</td>
                <td>${item.type}</td>
                <td><img src="${item.imgurl}" alt=""></td>
                <td><button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> 删除</button></td>
            </tr>`
    })
    document.querySelector('.table').innerHTML = tmp

    // 添加 删除 事件
    addClick()
}

// 渲染分页
function renderPages(page,pages){
    console.log( page,pages )// 1 3
    let tmp = `<li class="prev">
                <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                </a>
            </li>`

    for (let i = 1; i <= pages; i++){
        tmp += `<li class="num"><a href="#">${i}</a></li>`
    }

    tmp += `<li class="next">
            <a href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
            </a>
        </li>`

    document.querySelector('.pagination').innerHTML = tmp

    // 给当前页添加选中状态
    document.querySelectorAll('.pagination li')[page].className = 'num active'
}

let pagination = document.querySelector('.pagination')

pagination.onclick = function (e){
    // console.log( e.target )
    if (e.target.parentNode.className == 'next' || e.target.parentNode.parentNode.className == 'next') {// 点击下一页
        let lis = document.querySelectorAll('.pagination li')

        // 当前显示的li去掉active
        lis[page].classList.remove('active')

        page++
        if (page > pages) {
            page = pages
            lis[page].classList.add('active')
            return
        }
        
        // 下一个li添加active
        lis[page].classList.add('active')

        // 获取下一页数据并渲染
        getpage(page,size)
    }
    if (e.target.parentNode.className == 'prev' || e.target.parentNode.parentNode.className == 'prev') {// 点击上一页
        let lis = document.querySelectorAll('.pagination li')

        // 当前显示的li去掉active
        lis[page].classList.remove('active')

        page--
        if (page === 0) {
            page = 1
            lis[page].classList.add('active')
            return
        }
        
        // 上一个li添加active
        lis[page].classList.add('active')

        // 获取上一页数据并渲染
        getpage(page,size)
    }
    if (e.target.parentNode.className === 'num') {// 点击页码
        let lis = document.querySelectorAll('.pagination li')

        // 当前显示的li去掉active
        lis[page].classList.remove('active')

        page = e.target.innerText

        // 当前点击li添加active
        lis[page].classList.add('active')

        // 获取当前页数据并渲染
        getpage(page,size)
    }
}

// 关键字搜索
let keyword = document.querySelector('#keyword')
let search = document.querySelector('#search')
search.onclick = function (){
    // 要搜索的关键字
    let kw_val = keyword.value

    // 空值判断
    if (!kw_val) {
        alert('搜索内容不能为空！')
        return
    }

    // 发送搜索请求
    // axios.post('http://localhost:8080/goods/search',{
    axios.post('/api/goods/search',{
        kw: kw_val
    })
    .then((res)=>{
        if (res.data.code === 1) {
            // 有数据，渲染表格
            renderTable(res.data.data)
        } else {
            // 没有数据，页面显示提示
            document.querySelector('.table').innerHTML = '<h1>暂无数据！</h1>'
        }
    })
}

// 添加 删除 点击事件
function addClick(){
    let btns = document.querySelectorAll('.btn-danger')
    for (let i = 0; i < btns.length; i++){
        btns[i].onclick = function (){
            // 发送删除请求
            // axios.post('http://localhost:8080/goods/del',{
            axios.post('/api/goods/del',{
                name: this.parentNode.parentNode.firstElementChild.innerText
            })
            .then((res)=>{
                alert(res.data.msg)
                if (res.data.code === 1) {
                    // 删除对应的tr行
                    this.parentNode.parentNode.remove()
                }
            })
        }
    }
}
